<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/5/24
  Time: 8:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"  %>
<html>
<head>
    <title>Title</title>
    <%@include file="/comm/head.jsp"%>

</head>
<body>

<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="120">
                    <form-item label="日期(开始-结束)">
                        <row>
                            <col span="12"> <date-picker @on-change="orderVo.startDate=$event"  placeHolder="请输入起始日期" style="width: 150px" type="date" ></date-picker></col>
                            <col span="12"> <date-picker @on-change="orderVo.endDate=$event"   placeHolder="请输入结束日期" style="width: 150px" type="date" ></date-picker></col>
                        </row>
                    </form-item>


                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>

                </i-form>
            </p>
        </Panel>
    </Collapse>

    <i-table :columns="columns" :data="data" border stripe <%--:width="500"--%> :height="300">
        <template slot-scope="{row}" slot="money"><%--slot-scope有3个参数当前行数据row当前列数据column当前行序号index--%>
            <span>{{row.orderDetail.money}}</span>
        </template>

    </i-table>
    <ve-ring :data="contract_rate.data"
             :settings="contract_rate.settings.settings"
             :extend="contract_rate.settings.extend"
             height="360px"
             :colors="['#F8777A', '#FCB954', '#3A9DFF']"></ve-ring>

</div>
<%--<div id="main" style="width: 600px;height:400px;"></div>--%>
<%--
<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var names=[];
    var values=[];
    //数据加载完之前先显示一段简单的loading动画
    myChart.showLoading();
    axios.get(`${ctx}/xsb/list`)//post支持json，get支持formDate
        .then(({data})=>{
            this.data=data.result;

            for(var i=0;i<data.length;i++){
                names.push(data[i].type1);
                values.push(data[i].money);
            }
            myChart.hideLoading();  //隐藏加载动画
            myChart.setOption(
                {
                    title: {
                        text: '物料运输件数',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: names
                    },
                    series: [
                        {
                            name: '物料来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],

                            data:  data.result,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            );
        })

</script>
--%>
<script>
    new Vue({
            el:"#root",

        data(){
                return{
                    contract_rate: {
                        settings: {
                            settings: {
                                radius: [5, 95],
                                offsetY: '50%'
                            },
                            extend: {
                                legend: {
                                    orient: 'vertical',
                                    top: 100,
                                    left: 0
                                },
                                series: (series) => {
                                    series.push({
                                        radius: ['67%', '69%'],
                                        type: 'pie',
                                        label: {
                                            normal: {
                                                show: false
                                            },
                                            emphasis: {
                                                show: false
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            },
                                            emphasis: {
                                                show: false
                                            }
                                        },
                                        animation: false,
                                        tooltip: {
                                            show: false
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#3A9DFF'
                                            }
                                        },
                                        data: [{
                                            value: 1
                                        }]
                                    })
                                    series.push({
                                        radius: ['3%', '5%'],
                                        type: 'pie',
                                        label: {
                                            normal: {
                                                show: false
                                            },
                                            emphasis: {
                                                show: false
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            },
                                            emphasis: {
                                                show: false
                                            }
                                        },
                                        animation: false,
                                        tooltip: {
                                            show: false
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: '#3A9DFF'
                                            }
                                        },
                                        data: [{
                                            value: 1
                                        }]
                                    })
                                    return series
                                }
                            }
                        },
                        data: {
                            columns: ['商品类型', '销售额'],
                            rows: [

                                { '商品类型': '一般商品', '销售额': 25 },
                                { '商品类型': '家用电器', '销售额': 23 },
                                { '商品类型': '饮料', '销售额': 300 }
                            ],
                            labelLine: { // 指示线状态
                                show: true,
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        }
                    },
                    columns:[
                        {
                            title:"商品类型",key:"type1"
                        },
                        {
                            title:"销售额",slot:"money"
                        }],
                    data:[],
                    orderVo:{},


                }

        },
        methods:{
             search(){
                   axios.get(`${ctx}/xsb/list`)//post支持json，get支持formDate
                        .then(({data})=>{
                            this.data=data.result;
                            // console.log(this.data.length)
                            // console.log(this.data[0].type1)
                        });
                },

        },

        mounted(){
            this.search();
        }
    })
</script>
</body>
</html>
